<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />

    <script type="text/javascript" src="./js/verify.js"></script>
    <script type="text/javascript" src="./js/common/commonfuntion.js"></script>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="./css/mainmonitor.css" />

</head>

<body>
    <div id="container" class="mainmonitor">
        <div class="mainmonitor_01">
            <!--主屏内容-->
            <div class="mainmonitor_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="./images/back.svg" alt="">
                    </a>
                    <span class="tit" id="tit"></span>
                </div>
                <div class="m_list" id="project_list" style="position:relative;">
                    <img src="./images/all.svg" alt="" class="all_img"  style="position:absolute;top:14px;">
                    <div class="l_con alldata" id="alldata">
                        
                        <ul class="alldata" style="padding-top:40px;">
                            <li>
                                <p>项目总用电量</p>
                                <div class="ztdiv">
                                    <span id="tpapall"></span><span>kWh</span>
                                </div>
                            </li>
                            <li>
                                <p>项目当日用电量</p>
                                <div class="ztdiv">
                                    <span id="trrpall">0</span><span>kWh</span>

                                </div>
                            </li>
                            
                        </ul>
                        <ul class="alldata" style="margin-bottom:30px;padding-bottom:30px;border-bottom:1px dashed #25427A;">
                            <li>
                                <p>项目发电功率</p>
                                <div class="ztdiv">
                                    <span id="powerGenerationall">0</span><span>kW</span>

                                </div>
                            </li>
                            <li>
                                <p>项目负载功率</p>
                                <div class="ztdiv">
                                    <span id="itapall"></span><span>kW</span>
                                </div>
                            </li>
                        </ul>

                    </div>


                 

                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize = "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {

            var projectid = GetQueryString('projectid');
            var projectNameCN = GetQueryString('projectNameCN');
            $("#tit").html(' ');
            $("#tit").html(projectNameCN);
            $.ajax({
                type: "GET",
                url: "http://112.74.169.99:21021/api/TokenAuth/GetProjectData?projectid=" + projectid,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                    xhr.setRequestHeader("Authorization", accessToken);
                    xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                },
                success: function (res) {
                    var data = res.result;
                    $("#alldata").append( eachlist(data) );
                    $("#project_list").append( eachproject(data,projectid) );
                    
                    
                    let tpapall =0,trrpall = 0,powerGenerationall=0,itapall =0;

                    var listdata = [];
                    for(var i = 0; i < data.length; i++){
                        listdata[i] = [0,0,0,0];
                        for(var j = 0; j < data[i].length; j++){
                            tpapall += data[i][j][4].tpap; // 总用电量
                            trrpall += data[i][j][4].trrp;// 当日用电量
                            
                            powerGenerationall += data[i][j][1].powerGeneration;//发电功率
                            itapall += data[i][j][6].loadTAP; //负载功率

                            
                            listdata[i][0] += data[i][j][4].tpap;// 总用电量
                            listdata[i][1] += data[i][j][4].trrp;// 当日用电量
                            listdata[i][2] += data[i][j][1].powerGeneration;//发电功率
                            listdata[i][3] += data[i][j][6].loadTAP;//负载功率
                        }

                        $('#tpap'+i).html( dealnumber(listdata[i][0]) );// 总用电量
                        $('#trrp'+i).html( dealnumber(listdata[i][1]) );// 当日用电量
                        
                        $('#powerGeneration'+i).html( dealnumber(listdata[i][2]) );//发电功率
                        $('#itap'+i).html( dealnumber(listdata[i][3]) );//负载功率
                        
                    }

                    $('#tpapall').html( dealnumber(tpapall) );// 总用电量
                    $('#trrpall').html( dealnumber(trrpall) );// 当日用电量
                    $('#powerGenerationall').html( dealnumber(powerGenerationall) );//发电功率
                    $('#itapall').html( dealnumber(itapall) );//负载功率


                    setInterval(updateData,1000);

                },
                error: function (err) {
                    console.log("项目数据 请求失败");
                }
            });

            function updateData() { // 请求数据

                $.ajax({
                    type: "GET",
                    url: "http://112.74.169.99:21021/api/TokenAuth/GetProjectData?projectid=" + projectid,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                        xhr.setRequestHeader("Authorization", accessToken);
                        xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                    },
                    success: function (res) {
                        var data = res.result;


                        let tpapall =0,trrpall = 0,powerGenerationall=0,itapall =0;

                        var listdata = [];
                        for(var i = 0; i < data.length; i++){
                            listdata[i] = [0,0,0,0];
                            for(var j = 0; j < data[i].length; j++){
                                tpapall += data[i][j][4].tpap; // 总用电量
                                trrpall += data[i][j][4].trrp;// 当日用电量
                                
                                powerGenerationall += data[i][j][1].powerGeneration;//发电功率
                                itapall += data[i][j][6].loadTAP; //负载功率

                                
                                listdata[i][0] += data[i][j][4].tpap;// 总用电量
                                listdata[i][1] += data[i][j][4].trrp;// 当日用电量
                                listdata[i][2] += data[i][j][1].powerGeneration;//发电功率
                                listdata[i][3] += data[i][j][6].loadTAP;//负载功率
                            }

                            $('#tpap'+i).html( dealnumber(listdata[i][0]) );// 总用电量
                            $('#trrp'+i).html( dealnumber(listdata[i][1]) );// 当日用电量
                            
                            $('#powerGeneration'+i).html( dealnumber(listdata[i][2]) );//发电功率
                            $('#itap'+i).html( dealnumber(listdata[i][3]) );//负载功率
                            
                        }

                        $('#tpapall').html( dealnumber(tpapall) );// 总用电量
                        $('#trrpall').html( dealnumber(trrpall) );// 当日用电量
                        $('#powerGenerationall').html( dealnumber(powerGenerationall) );//发电功率
                        $('#itapall').html( dealnumber(itapall) );//负载功率

                       

                    },
                    error: function (err) {
                        console.log("数据请求失败");
                    }
                });
            }




            function eachlist(obj) {
                var str = ``;
                if (obj.constructor==Array) {
                    // console.log("数组");

                    for(var i = 0, len = obj.length; i < len; i++){
                        str += `
                            <ul class="listxm">
                                <li>
                                    <p>`+(i+4)+`#总用电量</p>
                                    <div class="ztdiv">
                                        <span id="tpap`+i+`"></span><span>kWh</span>
                                    </div>
                                </li>
                                <li>
                                    <p>`+(i+4)+`#当日用电量</p>
                                    <div class="ztdiv">
                                        <span id="trrp`+i+`">0</span><span>kWh</span>
                                    </div>
                                </li>
                                
                            </ul>
                            <ul class="listxm">
                                <li>
                                    <p>`+(i+4)+`#发电功率</p>
                                    <div class="ztdiv">
                                        <span id="powerGeneration`+i+`">0</span><span>kW</span>

                                    </div>
                                </li>
                                <li>
                                    <p>`+(i+4)+`#负载功率</p>
                                    <div class="ztdiv">
                                        <span id="itap`+i+`"></span><span>kW</span>
                                    </div>
                                </li>
                            </ul>
                        `;
                    }

                    return str;
                }
                if (obj.constructor==Object) {
                    console.log("对象");
                    for (var i in obj) {
                        // var str;
                        str += '<span class="data_show"><span data-id='+obj[i].community_id+'>' + obj[i].community_name + '</span><span class="del glyphicon glyphicon-plus-sign"></span></span>';
                    }
                    return str;
                }
                return obj;
            }

            function eachproject(obj,projectid) {
                var str = ``;
                if (obj.constructor==Array) {
                    // console.log("数组");

                    // for(var i = 0, len = obj.length; i < len; i++){
                    for(var i = 0 ;i < 2; i++){
                        if(i !== 3){
                            str += `
                            <div class="l_con l_list">
                                <div class="xmicon"><div class="xmcon"></div></div>
                                <div class="xmtit">滇中引水项目`+(i+4)+`#支洞</div>
                                <div class="xmdata">
                                    <span class="d_status normal">正常</span>
                                    <div class="a_con">云南楚雄</div>
                                </div>

                                <div class="xmdetail"
                                    onClick="window.location.href='ZYCN02detail.html?num=`+(i+4)+`&id=`+projectid+`'">
                                    <p>
                                        查看详情
                                    </p>

                                </div>
                            </div>
                            `;
                        }
                    }
                    
                    return str;
                }
                if (obj.constructor==Object) {
                    console.log("对象");
                    for (var i in obj) {
                        // var str;
                        str += '<span class="data_show"><span data-id='+obj[i].community_id+'>' + obj[i].community_name + '</span><span class="del glyphicon glyphicon-plus-sign"></span></span>';
                    }
                    return str;
                }
                return obj;
            }
        });
    </script>


</body>

</html>